<ui:composition		
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"      
      xmlns:pe="http://primefaces.org/ui/extensions">

	
	     
<h:form id="frmDynamicFilter" >	    
	 <h:panelGroup id="dynaFormGroup">
	 	<p:fieldset legend="Filtros de consulta" toggleable="true" style="marging-bottom:20px">      
			<pe:dynaForm id="dynaForm" value="#{dynamicFilterBean.model}" var="data" >  
		    	<pe:dynaFormControl type="input" for="txt">  
		           <p:inputText id="txt" value="#{data.value}" required="#{data.required}" />  
		       	</pe:dynaFormControl>  
		       	<pe:dynaFormControl type="calendar" for="cal" styleClass="calendar">  
		           <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>  
		       	</pe:dynaFormControl>  
		       	<pe:dynaFormControl type="select" for="sel" styleClass="select">  
		           <p:selectOneMenu id="sel" value="#{data.value}" required="#{data.required}">  
		               <f:selectItems value="#{data.selectItems}"/>  
		           </p:selectOneMenu>  
		       	</pe:dynaFormControl>  
		        <f:facet name="buttonBar">  
		             <p:commandButton value="Submit" action="#{dynamicFilterBean.submitForm}" update=":frmDynamicFilter :frmCatalogue" /> 
		             <!--   update=":frmContent:dynaFormGroup :frmContent:inputValues" oncomplete="handleComplete(xhr, status, args)"/> -->   
		             <p:commandButton type="reset" value="Reset" style="margin-left:5px;"/>             
		         </f:facet>  
			</pe:dynaForm>  
    	</p:fieldset>
    </h:panelGroup>
</h:form>	
  	
           
	<!-- <p:dialog header="Input values" widgetVar="inputValuesWidget">
    	<h:panelGroup id="inputValues" layout="block" style="margin:10px;">
        	<h:outputText value="valores de prueba" escape="false"/>
    	</h:panelGroup>
	</p:dialog>
     -->  
        <h:outputScript id="dynaFormScript" target="body">  
            /* <![CDATA[ */ 
            function handleComplete(xhr, status, args) { 
            if(args && args.isValid) { 
            PF('inputValuesWidget').show(); 
            } else { 
            PF('inputValuesWidget').hide(); 
            } 
            } 
            /* ]]> */  
        </h:outputScript>  

        <h:outputStylesheet id="dynaFormCSS">  
            /* note: trick with colspan is needed for IE8 */  
            .pe-dynaform-cell input,  
            .pe-dynaform-cell textarea,  
            .pe-dynaform-cell[colspan="1"] input,  
            .pe-dynaform-cell[colspan="1"] textarea {  
            width: 150px;  
            }  

            /* note: trick with colspan is needed for IE8 */  
            .pe-dynaform-cell.calendar input,  
            .pe-dynaform-cell[colspan="1"].calendar input {  
            width: 120px;  
            }  

            .pe-dynaform-cell.select .ui-selectonemenu {  
            width: 157px !important;  
            }  

            .pe-dynaform-cell.select .ui-selectonemenu .ui-selectonemenu-label {  
            width: 130px !important;  
            }  
        </h:outputStylesheet>
</ui:composition>